// News
import "@/style/page/index.scss";
import { Row, Col } from "antd";
import { useEffect, useState } from "react";
import { newsInfo4 } from "@/api/news";
import * as dayjs from "dayjs";
function News(props) {
    const [dataList, setDataList] = useState(null);
    async function getDataList() {
        const { data } = await newsInfo4();
        setDataList(data);
    }
    useEffect(() => {
        getDataList();
    }, []);
    return (
        <div className="News">
            <div className="NewsContent">
                {dataList && (
                    <Row gutter={[20, 2]}>
                        <Col span={10}>
                            <div className="NewsContentBanner">
                                <img
                                    src={require("@/assets/index/news_banner.png")}
                                />
                            </div>
                            <div className="NewsContentInfo">
                                <div className="title">{dataList[0].title}</div>
                                <div className="info right_info">
                                    {dataList[0].summary}
                                </div>
                            </div>
                        </Col>
                        <Col span={14}>
                            <div className="NewsContentInfo NewsContentInfo_first">
                                <Row gutter={[20, 2]}>
                                    <Col span={8}>
                                        <div className="News_Times">
                                            <div className="date">
                                                {dayjs(dataList[1].date).format(
                                                    "MM.DD"
                                                )}
                                            </div>
                                            <div className="year">
                                                {dayjs(dataList[1].date).format(
                                                    "YYYY"
                                                )}
                                            </div>
                                        </div>
                                    </Col>
                                    <Col span={16} className="col_info">
                                        <div className="title">
                                            {dataList[1].title}
                                        </div>
                                        <div className="info">
                                            {dataList[1].summary}
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                            <div className="NewsContentInfo">
                                <Row gutter={[20, 2]}>
                                    <Col span={8}>
                                        <div className="News_Times">
                                            <div className="date">
                                                {dayjs(dataList[2].date).format(
                                                    "MM.DD"
                                                )}
                                            </div>
                                            <div className="year">
                                                {dayjs(dataList[2].date).format(
                                                    "YYYY"
                                                )}
                                            </div>
                                        </div>
                                    </Col>
                                    <Col span={16} className="col_info">
                                        <div className="title">
                                            {dataList[2].title}
                                        </div>
                                        <div className="info">
                                            {dataList[2].summary}
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                            <div className="NewsContentInfo">
                                <Row gutter={[20, 2]}>
                                    <Col span={8}>
                                        <div className="News_Times">
                                            <div className="date">
                                                {dayjs(dataList[3].date).format(
                                                    "MM.DD"
                                                )}
                                            </div>
                                            <div className="year">
                                                {dayjs(dataList[3].date).format(
                                                    "YYYY"
                                                )}
                                            </div>
                                        </div>
                                    </Col>
                                    <Col span={16} className="col_info">
                                        <div className="title">
                                            {dataList[3].title}
                                        </div>
                                        <div className="info">
                                            {dataList[3].summary}
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    </Row>
                )}
            </div>
        </div>
    );
}

export default News;
